<template>
   <ul class="ChannelList">
      <li v-for="Item in channels" :key="Item.id">
         <span>#{{ Item.title }}#</span>
         <img :src="Item.cover" alt="" />
      </li>
   </ul>
</template>

<script setup>
import axios from 'axios';
import { ref, onBeforeMount } from 'vue'
let channels = ref([])
onBeforeMount(() => {
   axios.get("/mock/channel").then(res => {
      const CategoryList = res.data[0].data.categories;
      let ChannelItems = [];
      for (let cate of CategoryList) {
         let newCate = {
            "title": cate.category_name,
            "cover": cate.cover,
            "id": cate.id,
            "url": cate.url
         }
         ChannelItems.push(newCate);
      }
      channels.value = ChannelItems
     
   })

})



</script>
<style lang="scss" scoped>
.ChannelList {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto;

   li {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      color: #fff;
   }
   img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

span {
   position: absolute;
   font-size: 4vh;
}
</style>
